<template>
    <div class="ShopsImg_body">
        <el-image :src="imgObj.img" />
        <el-image class="anchrImg" :style="{ top: imgObj.y, left: imgObj.x, }"
            :src="isImgShow ? anchorImg.action : anchorImg.img" v-if="imgObj.position" @click="changeUrl" />
        <el-card :style="{
            top: imgObj.y, left: imgObj.x,
            'margin-left': parseInt(imgObj.x) < 60 ? '40px' : '-218px',
            'margin-top': parseInt(imgObj.y) < 50 ? '-20px' : '-80px',
        }" v-if="imgObj.position && isImgShow" @click="handleClick(imgObj)" >
            <div>
                <div>
                    {{ imgObj.title }}
                </div>
                <div>
                    货号：{{ imgObj.num }}
                </div>
                <div>
                    ¥{{ imgObj.price.toFixed(2) }}
                </div>
            </div>
            <div>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </div>
        </el-card>
    </div>

</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
const imgObj = ref({})
const prosp = defineProps({
    data: Object
})
const emit = defineEmits(['iClick'])

function handleClick(str) {
  emit('iClick',str)
}
onMounted(() => {
    imgObj.value = prosp.data
})
const anchorImg = {
    img: 'https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/inspiration/ico_hot.png',
    action: 'https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/inspiration/ico_hot1.png'
}
const isImgShow = ref(false)
const changeUrl = () => {
    isImgShow.value = !isImgShow.value
}
</script>

<style scoped lang="scss">
.ShopsImg_body {
    position: relative;
}

.anchrImg {
    width: 40px;
    position: absolute;
    margin-left: -20px;
    margin-top: -20px;
    z-index: 20000;
}

:deep(.el-card) {
    width: 155px;
    height: 78px;
    padding: 0px;
    padding: 12px;
    z-index: 20001;
    position: absolute;

    &>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        padding: 0px;
        font-size: 14px;

        &> :nth-child(1) {
            display: flex;
            height: 100%;
            justify-content: space-between;
            flex-direction: column;

            &>:nth-child(3) {
                font-weight: bold;
                font-size: 16px;
            }
        }
    }
}
</style>